<template>
  <el-tooltip
    class="box-item"
    effect="dark"
    content="列设置"
    placement="top-end"
  >
    <el-button @click="columnSetting" class="columnSetting"><el-icon><Setting /></el-icon></el-button>
  </el-tooltip>
  <div class="columnSettingContainer">
    <el-dialog
      :modal="false"
      :show-close="false"
      v-model="dialogVisible"
      title=""
      width="500"
      id="columnSettingDialog"
    > 
      <div style="height: 30px;">
        <span  style="float: left;padding-left: 20px;" >列展示</span>
        <el-button type="primary" plain style="float: right;margin-right: 10px;" @click="resetData">重置</el-button>
      </div>
       <el-draggable
        :list="orgColumnList"
        :animation="100"
        item-key="prop"
        class="list-group"
        :forceFallback="true"
        ghost-class="ghost"
        @end="onEnd"
      >
        <template #item="{ element }">
          <div class="items"  v-if="element.fixed==false">
            <div class="title">
               <el-row :gutter="0">
                 <el-col :span="4">
                  <el-icon class="draggableIcon"><Rank /></el-icon>
                 </el-col>
                 <el-col :span="16">
                  <el-checkbox style="margin-left: 20px;" :model-value="!element.hide" @change="(value)=>checkBoxChange(value,element)">{{ element.label }}</el-checkbox>
                  <el-dropdown  v-if="element.subColumnList" :hide-on-click="false">
                      <span class="el-dropdown-link">
                        <span style="color: rgb(43 44 44);">展开</span>
                        <el-icon class="el-icon--right">
                          <arrow-down />
                        </el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item disabled v-for="subElement in element.subColumnList" :key="subElement">
                            <el-checkbox style="margin-left: 20px;" :checked="!subElement.hide" @change="(value)=>subCheckBoxChange(value,subElement,element)">{{ subElement.label }}</el-checkbox>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                 </el-col>
                 <el-col :span="2">
                     <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="下移"
                        placement="left"
                        v-if="isEnd(element)"
                      >
                        <el-button class="topOrDown"  @click="down(element)"><el-icon style="color: #0071e5;"><Bottom /></el-icon></el-button> 
                      </el-tooltip>
                 </el-col>
                 <el-col :span="2">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="上移"
                    placement="left"
                    v-if="isFirst(element)"
                  >
                    <el-button class="topOrDown" @click="top(element)"><el-icon style="color: #0071e5;"><Bottom style="transform: rotate(180deg);" /></el-icon></el-button> 
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>
          </div>
        </template>
      </el-draggable>
      <!-- 固定列展示 -->
      <template v-for="(item,index) in orgColumnList" :key="index+item.prop">
        <div v-if="item.fixed!=false" style="text-align: left;padding: 3px 0 0 0;">
          <el-row :gutter="0">
            <el-col :span="4">
              <el-icon class="draggableIcon">
              <svg t="1719479824101" class="icon" style="width: 1em;height: 1em;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3392"><path d="M911.15102 323.918367L689.632653 102.4c-18.808163-18.808163-50.155102-20.897959-71.053061-2.089796l-267.493878 229.877551-96.130612 14.628572c-6.269388 0-12.538776 4.179592-16.718367 8.359183l-58.514286 58.514286c-20.897959 20.897959-20.897959 54.334694 0 73.142857l152.555102 152.555102L125.387755 844.277551c-12.538776 12.538776-12.538776 31.346939 0 43.885714 6.269388 6.269388 14.628571 10.44898 20.897959 10.44898s16.718367-2.089796 22.987755-8.359184l204.8-204.8 152.555102 152.555102c10.44898 10.44898 22.987755 14.628571 37.616327 14.628572s27.167347-6.269388 37.616326-14.628572l58.514286-58.514285c4.179592-4.179592 8.359184-10.44898 8.359184-16.718368l14.628571-96.130612 227.787755-267.493878c18.808163-25.077551 18.808163-56.42449 0-75.232653zM631.118367 629.028571c-4.179592 4.179592-6.269388 10.44898-6.269387 14.628572l-14.628572 94.040816-45.97551 45.97551-334.367347-334.367347 43.885714-43.885714 94.040817-14.628571c6.269388 0 10.44898-4.179592 14.628571-6.269388l269.583674-229.877551 206.889795 206.889796-227.787755 267.493877z" fill="#515151" p-id="3393"></path></svg>
            </el-icon>
            </el-col>
            <el-col :span="16">
              <el-checkbox style="margin-left: 20px;" :model-value="!item.hide" @change="(value)=>checkBoxChange(value,item)">{{ item.label }}</el-checkbox>
              <el-dropdown  v-if="item.subColumnList" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <span style="color: rgb(43 44 44);">展开</span>
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item disabled v-for="subElement in item.subColumnList" :key="subElement">
                      <el-checkbox style="margin-left: 20px;" :checked="!subElement.hide" @change="(value)=>subCheckBoxChange(value,subElement,item)">{{ subElement.label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
             <el-col :span="4">
              <span class="fixedText">
                固定列
              </span>
            </el-col>
          </el-row>
          
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
      'el-draggable': draggable
    },
   props: {
    columnList:Array,
   },
  data(){
    return{
      // 页面操作的数据
      orgColumnList:JSON.parse(JSON.stringify(this.columnList)),
      // 备份数据,用于重置
      bakColumnList:JSON.parse(JSON.stringify(this.columnList)),
      // 开关
      dialogVisible:false,
      // 所有列是否展示
      columnVisable:true
    }
  },
  methods: {
    // 打开弹窗
    columnSetting() {
      if(this.dialogVisible == true){
        this.dialogVisible = false
      } else {
        this.dialogVisible = true
        this.$nextTick(() => {
          let dataContainerDom = document.getElementsByClassName("dataContainer");
          let orgClass = dataContainerDom[0].className
          let columnSettingDialog = document.getElementById('columnSettingDialog')
          if (orgClass.includes('dataContainerAmplify')) {
            columnSettingDialog.style.marginTop = '135px'
          } else {
            columnSettingDialog.style.marginTop = '265px'
          }
        })
      }
    },
    // 重置
    resetData(){
      this.$emit('update:columnList',JSON.parse(JSON.stringify(this.bakColumnList)))
      this.orgColumnList = JSON.parse(JSON.stringify(this.bakColumnList))
    },
    // 拖拽结束
    onEnd(){
      this.$emit('update:columnList',[...this.orgColumnList])
    },
    // 上移一位
    top(row){
      let dataList = this.orgColumnList
      // 被移动的元素下标
      let index = dataList.findIndex(item=>item.prop==row.prop)
      // 当前元素
      let currentObj = dataList[index]
      // 如果已经在第一个位置,不处理
      if (index==0) {
        return
      } else {
         // 上一个元素
        let latObj = dataList[index-1]
        // 交换位置
        dataList.splice(index,1,latObj)
        dataList.splice(index-1,1,currentObj)
        this.onEnd()
      }
    },
    // 下移一位
    down(row){
      let dataList = this.orgColumnList
      // 被移动的元素下标
      let index = dataList.findIndex(item=>item.prop==row.prop)
      // 当前元素
      let currentObj = dataList[index]
      // 如果已经在最后一个位置,不处理
      if (index==(dataList.length-1)) {
        return
      } else {
         // 下一个元素
        let nextObj = dataList[index+1]
        // 交换位置
        dataList.splice(index,1,nextObj)
        dataList.splice(index+1,1,currentObj)
        this.onEnd()
      }
    },
    // 子项选中事件
    subCheckBoxChange(value,subRow,row){
      this.orgColumnList.forEach(item=>{
        if (item.prop==row.prop) {
          // 循环子项
          item.subColumnList.forEach(subItem=>{
            if (subItem.prop == subRow.prop) {
              subItem.hide = !value
            }
          })
          // 子项是否全隐藏
          let childrenIsHide = true
          item.subColumnList.forEach(subItem=>{
            // 子项有一项显示, 则为显示
            if (subItem.hide == false) {
              childrenIsHide = false
            }
          })
          if (childrenIsHide == true) {
            // 如果子项全部隐藏, 父项也不显示了
            item.hide = true
          } else {
            item.hide = false
          }
        }
      })
      this.onEnd()
    },
    // 选中/取消选中事件
    checkBoxChange(value,row){
      row.hide = !value
      console.log('固定列',value,row)
      this.onEnd()
    },
    // 是否是第一个元素, 是, 返回false, 不展示上移
    isFirst(row){
      let flag = row.prop == this.orgColumnList[0].prop ? false:true
      return flag
    },
    /**
     * 是否是最后一个元素 , 是, fanhui false, 不展示下移
     * -2 是因为最后一个元素是'操作'列
     * @param {*} row 
     */
    isEnd(row){
      let flag = row.prop == this.orgColumnList[this.orgColumnList.length-2].prop ? false:true
      return flag
    },
  }
}
</script>
<style scoped>
.columnSettingContainer {
  position: absolute;
  z-index: 999;
  right:2%;
}
.columnSetting{
  position: absolute;
  z-index: 999;
  right:2%;
  border: unset;
  margin-top: 3px;
  color: black;
  font-size: 17px;
  border-radius: 50%;
  width: 20px;
  background-color: unset;
}
/deep/.el-dialog{
  width: 300px;
  position: absolute;
  right: 2%;
  margin-top: 275px;
  padding-top:10px;
  padding-bottom: 5px;
}
/deep/.el-dialog__header{
  display: none;
}
.draggableIcon {
  float: left;
  padding-left: 20px;
  font-size: 15px;
  margin-top: 5px;
}
.items {
  padding: 5px 0;
  border-bottom: solid 1px #e3e2e2;
}
.list-group {
  border-top: solid 1px #e3e2e2;    
}
/deep/.el-dialog__body {
  height: 450px;
  max-height: 450px;
  overflow-y: scroll;
}
.title {
  text-align: left;
}
.items:hover{
  cursor: move;
}
/deep/.el-checkbox__label {
  font-size: 14px;
  font-weight: 600;
}
.topOrDown {
  border: unset;
  float: right;
  width: 30px;
  z-index: 9999999;
}
.unmover {
  padding: 5px 0;
  border-bottom: solid 1px #e3e2e2;
}
.fixedText {
  font-size: 12px;
  float: right;
  margin-right: 8%;
  margin-top: 4px;
}
/deep/ .el-checkbox__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
}
.el-dropdown {
  float: right;
  margin-top: 4px;
  font-size: 12px;
}
.el-dropdown .el-icon--right {
  color: black;
}
.el-dropdown-menu {
  width: 170px;
}
</style>